日常在使用Facebook、Instagram、Line APP時
是不是會看到下方能切換首頁、個人檔案、功能表、朋友及通知的選單
那麼就讓我們實作切換式選單吧

※圖片來源：FaceBook APP

本篇使用套件為@react-navigation/bottom-tabs
版本：6.0.9

官方網站：https://reactnavigation.org/docs/bottom-tab-navigator/
與React Navigation 介紹的套件其實是同一系列

安裝

npx expo install @react-navigation/bottom-tabs

圖檔準備

現代化APP，下方選單都一定要使用圖示標記
且讓使用者一目了然🏠

另外，平常在使用社群軟體APP時
點選「首頁」，會發現首頁的圖示改變
則稱之為焦點(Focus)

在準備圖片時，需準備一張未Focus的圖，還需準備Focus後的圖(一組圖共兩張)
依照功能分類至少準備兩組圖片以上(切換選單至少要兩項才能做切換)

自製圖片的大小盡量不要太大，否則圖片壓縮後容易失真(目前使用100*100 px)

※若懶的自行製圖、找圖
也可以使用Expo Icon輔助你引用預設圖片
安裝指令：npx expo install @expo/vector-icons
Icon尋找處：https://icons.expo.fyi/Index

使用方法

Bottom Tabs Navigator擁有非常多樣式調整
本篇只會講解專案上常用的基本樣式設定

1. 準備N個Component & 登入後導航容器

├── src
│   └── Home
│       ├── IndexScreen.js //首頁畫面
│       ├── LoginScreen.js //登入畫面
│       ├── MemberScreen.js //會員管理畫面
│       └── SettingScreen.js //功能表畫面
├── Navigation
│       └── IndexNavigator.js //登入後導航容器

※這邊只以快速講解為主
實務應用可能會更多畫面，甚至資料夾需分層

2. 建立BottonTab導航器、圖片指定、樣式調整

附上完整程式碼

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import MemberScreen from "../src/Home/MemberScreen";
import SettingScreen from "../src/Home/SettingScreen";
import IndexScreen from "../src/Home/IndexScreen";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";

export default function IndexNavigator() {
  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarActiveTintColor: "tomato",
        tabBarInactiveTintColor: "gray",
        tabBarStyle: { height: 60, paddingBottom: 10 },
      })}
    >
      <Tab.Screen
        name="Index"
        component={IndexScreen}
        options={{
          title: "首頁",
          tabBarIcon: ({ focused, color, size }) =>
            !focused ? (
              <Ionicons name="home" size={size} color={color} />
            ) : (
              <Ionicons name="home-outline" size={size} color={color} />
            ),
          unmountOnBlur: true,
        }}
      />
      <Tab.Screen
        name="Member"
        component={MemberScreen}
        options={{
          title: "會員管理",
          unmountOnBlur: true,
          tabBarIcon: ({ focused, color, size }) =>
            !focused ? (
              <MaterialIcons name="people" size={size} color={color} />
            ) : (
              <MaterialIcons name="people-outline" size={size} color={color} />
            ),
        }}
      />
      <Tab.Screen
        name="Setting"
        component={SettingScreen}
        options={{
          title: "功能表",
          unmountOnBlur: true,
          tabBarIcon: ({ focused, color, size }) =>
            !focused ? (
              <Ionicons name="md-settings" size={size} color={color} />
            ) : (
              <Ionicons name="md-settings-outline" size={size} color={color} />
            ),
        }}
      />
    </Tab.Navigator>
  );
}

效果如下：

Tab.Navigator 整體Bar設定講解(screenOptions)

• headerShown 設定是否顯示畫面標題(title)
• tabBarActiveTintColor 點選下方Focus時Bar整體顏色
• tabBarInactiveTintColor 未Focus時其他Bar整體顏色
• tabBarStyle 整個Bar的邊界、間距、高度寬度...等樣式調整
  若Focus顏色皆未設定，預設為藍(Focus)灰(NoFocus)色

Tab.Screen 個別Bar設定講解(options)

• title Icon下方文字名稱
• unmountOnBlur 在離開導航頁面時是否釋出元件
  官方不建議設定false，會破壞使用者體驗
• tabBarIcon 決定這個功能的Icon
  官方提供點選觸發參數({ focused, color, size })
focused 布林值，是否被聚焦
  color 字串，設定圖標顏色
  size 數字，設定圖標大小

上方程式碼Icon採用Expo Icon
若自己有Icon，在tabBarIcon請使用Image回傳

<Image
    style={{
    width: 40,
    height: 40,
    overflow: "hidden",
    }}
    source={require("../../img/ICON/menu.png")}
/>

結語：
在學習完React Navigation Native後
使用同一系列的其他選單功能，相對得心應手

原本也只是照著官網操作一次
突然發現自己也能做出像Line的選單

下一篇，要來持續介紹React Navigation系列
另外一種風格的「左右滑動選單」。